<template>
	<div class="container">
		<!-- 第一行 -->
		<div class="row first-row">
			<!-- 第一块：一行两个，超出滚动 -->
			<div class="block large">
				<div class="block-title">待办事项</div>
				<div class="content-wrapper">
					<div class="scroll-content">
						<div class="grid-content">
							<div v-for="item in daibanlist" :key="item" class="item1 cursor" @click="godaibanNew(item)">
								<div class="item-title">{{ item.name }}</div>

								<div class="item-content">{{ item.number }}</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- 第二块：一行三个，超出滚动 -->
			<div class="block medium">
				<div class="block-title">常用功能</div>
				<div class="content-wrapper">
					<div class="scroll-content">
						<div v-if="userStore.user.roleCode.includes('SHZJW') || userStore.user.roleCode.includes('SHZG')" class="grid-content">
							<div class="item" @click="router.push('/Sproject/audit/index')">
								<img src="@/assets/imgshenhe.png" alt="" width="20px" height="20px" />
								<div class="item-title1">标准申报审核</div>
							</div>
							<div class="item" @click="router.push('/bianzhi/shenhe/index')">
								<img src="@/assets/imgshenhe.png" alt="" width="20px" height="20px" />
								<div class="item-title1">标准编制审核</div>
							</div>
							<div class="item" @click="router.push('/Reexamine/audit/index')">
								<img src="@/assets/imgshenhe.png" alt="" width="20px" height="20px" />
								<div class="item-title1">标准复审审核</div>
							</div>
						</div>

						<div v-if="userStore.user.roleCode.includes('SYADMIN') || userStore.user.roleCode.includes('ZZADMIN')" class="grid-content">
							<div class="item" @click="router.push('/Sproject/audit/index')">
								<img src="@/assets/imgshenhe.png" alt="" width="20px" height="20px" />
								<div class="item-title1">标准申报审核</div>
							</div>
							<div class="item" @click="router.push('/bianzhi/shenhe/index')">
								<img src="@/assets/imgshenhe.png" alt="" width="20px" height="20px" />
								<div class="item-title1">标准编制审核</div>
							</div>
							<div class="item">
								<img src="@/assets/imgguidang.png" alt="" width="20px" height="20px" />
								<div class="item-title1">标准归档</div>
							</div>
							<div class="item" @click="router.push('/Prospect-project/project-examine/index')">
								<img src="@/assets/imgshenhe.png" alt="" width="20px" height="20px" />
								<div class="item-title1">前瞻性研究申报审核</div>
							</div>
							<div class="item" @click="router.push('/Prospect-project/Project-process-audit/index')">
								<img src="@/assets/imgshenhe.png" alt="" width="20px" height="20px" />
								<div class="item-title1">前瞻性研究编制审核</div>
							</div>
							<div class="item" @click="router.push('/Reexamine/audit/index')">
								<img src="@/assets/imgshenhe.png" alt="" width="20px" height="20px" />
								<div class="item-title1">标准复审审核</div>
							</div>
							<div class="item">
								<img src="@/assets/imgchengguo.png" alt="" width="20px" height="20px" />
								<div class="item-title1">成果发布</div>
							</div>
							<div class="item">
								<img src="@/assets/imgshenhe.png" alt="" width="20px" height="20px" />
								<div class="item-title1">账号分配</div>
							</div>
							<div class="item" @click="router.push('/system/deadlineTime/index')">
								<img src="@/assets/imgshijian.png" alt="" width="20px" height="20px" />
								<div class="item-title1">时间设定</div>
							</div>
						</div>

						<div v-if="userStore.user.roleCode.includes('SB')" class="grid-content">
							<div class="item" @click="router.push('/Sproject/declare/index')">
								<img src="@/assets/imgshenbao.png" alt="" width="20px" height="20px" />
								<div class="item-title1">标准申报</div>
							</div>
							<div class="item" @click="router.push('/bianzhi/shenbao/index')">
								<img src="@/assets/imgbianzhi.png" alt="" width="20px" height="20px" />
								<div class="item-title1">编制申报管理</div>
							</div>
							<div class="item" @click="router.push('/Reexamine/declare/index')">
								<img src="@/assets/imgbianzhi.png" alt="" width="20px" height="20px" />
								<div class="item-title1">标准复审申报</div>
							</div>
							<div class="item" @click="router.push('/Prospect-project/project-declare/index')">
								<img src="@/assets/imgshenbao.png" alt="" width="20px" height="20px" />
								<div class="item-title1">前瞻性研究申报</div>
							</div>
							<div class="item" @click="router.push('/Prospect-project/Project-process/index')">
								<img src="@/assets/imgbianzhi.png" alt="" width="20px" height="20px" />
								<div class="item-title1">前瞻性研究过程管理</div>
							</div>
							<!-- <div class="item" @click="router.push('/Reexamine/declare/index')">
								<img src="@/assets/imgshenhe.png" alt="" width="20px" height="20px" />
								<div class="item-title1">标准复审申报</div>
							</div> -->
						</div>

						<div v-if="userStore.user.roleCode.includes('SHZJ') || userStore.user.roleCode.includes('SHZZ')" class="grid-content">
							<div class="item" @click="router.push('/Sproject/audit/index')">
								<img src="@/assets/imgshenhe.png" alt="" width="20px" height="20px" />
								<div class="item-title1">标准申报审核</div>
							</div>
							<div class="item" @click="router.push('/bianzhi/shenhe/index')">
								<img src="@/assets/imgshenhe.png" alt="" width="20px" height="20px" />
								<div class="item-title1">标准编制审核</div>
							</div>
							<div class="item">
								<img src="@/assets/imgguidang.png" alt="" width="20px" height="20px" />
								<div class="item-title1">标准归档</div>
							</div>
							<div class="item" @click="router.push('/Prospect-project/project-examine/index')">
								<img src="@/assets/imgshenhe.png" alt="" width="20px" height="20px" />
								<div class="item-title1">前瞻性研究申报审核</div>
							</div>
							<div class="item" @click="router.push('/Prospect-project/Project-process-audit/index')">
								<img src="@/assets/imgshenhe.png" alt="" width="20px" height="20px" />
								<div class="item-title1">前瞻性研究编制审核</div>
							</div>
							<div class="item" @click="router.push('/Reexamine/audit/index')">
								<img src="@/assets/imgshenhe.png" alt="" width="20px" height="20px" />
								<div class="item-title1">标准复审申报</div>
							</div>
							<div class="item">
								<img src="@/assets/imgchengguo.png" alt="" width="20px" height="20px" />
								<div class="item-title1">成果发布</div>
							</div>

							<div class="item" @click="router.push('/system/deadlineTime/index')">
								<img src="@/assets/imgshijian.png" alt="" width="20px" height="20px" />
								<div class="item-title1">时间设定</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- 第三块：通知消息列 -->
			<div class="block small">
				<div class="block-title">超期提醒</div>
				<div class="content-wrapper">
					<div class="scroll-content">
						<div v-for="item in chaoqixintixing" :key="item" class="flex box-row-column" style="width: 100%">
							<div style="font-size: 15px; font-weight: 600">{{ item.name }}</div>
							<ul class="ul">
								<li v-for="value in item.list" :key="value" class="ul-item flex box-align-center cursor">
									<div class="ul-item-title flex-1">{{ value.name }}</div>
									<div class="ul-item-go" @click="godaiban(value.pagePath)">进入</div>
								</li>
							</ul>
						</div>
						<!-- <div class="notice-item">通知1：系统将于今晚进行维护</div>
						<div class="notice-item">通知2：新版本已发布</div>
						<div class="notice-item">通知3：重要安全更新</div>
						<div class="notice-item">通知4：年度总结会议通知</div>
						<div class="notice-item">通知5：培训计划安排</div>
						<div class="notice-item">通知6：节假日安排</div>
						<div class="notice-item">通知7：系统使用指南</div>
						<div class="notice-item">通知8：系统使用指南</div>
						<div class="notice-item">通知9：系统使用指南</div>
						<div class="notice-item">通知9：系统使用指南</div> -->
					</div>
				</div>
			</div>
		</div>

		<!-- 第二行 -->
		<div class="row second-row">
			<!-- 第一块：一行两个，超出滚动 -->
			<div class="block large">
				<div class="block-title">统计分析</div>
				<div class="content-wrapper">
					<div class="scroll-content">
						<div class="grid-content" style="height: 100%">
							<div v-for="(item, index) in chartData" :key="index" class="item11 flex-1">
								<div :id="'chart-' + index" style="width: 100%; height: 100%"></div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- 第二块：通知消息列 -->
			<div class="block small">
				<div class="block-title">通知公告</div>
				<div class="content-wrapper">
					<div class="scroll-content">
						<ul class="ul">
							<li v-for="value in state.dataList" :key="value" class="ul-item flex box-align-center">
								<div class="ul-item-title flex-1">{{ value.noticePublishName }}</div>
								<div class="ul-item-go cursor" @click="handlelook(value.noticePublishFileId)">预览</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { govNoticePublishListApi } from '@/api/government/index'
import { workAnalyseApi, workBenchApi, workRemindApi } from '@/api/workbench'
import { useUserStore } from '@/store/modules/user'
import { useTransition } from '@vueuse/core'
import * as echarts from 'echarts'
import { filePreviewById, filePreviewByName } from '@/api/sys/upload'
import { nextTick, onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const userStore = useUserStore()

const source = ref(0)
const outputValue = useTransition(source, {
	duration: 1500
})
source.value = 888888
const chaoqixintixing = ref([])
const active = ref('first')
const daibanlist = ref([])
const tableData = []

const godaiban = item => {
	// console.log(item)
	router.push({
		path: '/' + item
	})
}

const handlelook = async (file: any) => {
	console.log(file)
	// 替换为你的下载逻辑
	if (file) {
		filePreviewById(file).then(res => {
			window.open(res.data.url)
		})
	}
}
const godaibanNew = item => {
	console.log(`/${item.pagePath}?${item.searchName}=${item.searchValue}`)
	router.push({
		path: `/${item.pagePath}`,
		query: {
			[item.searchName]: item.searchValue
		}
	})
}

const chartData = ref([])
const state = reactive({
	queryForm: {
		pageNum: 1,
		pageSize: 40
	},
	total: 1,
	dataListLoading: false,
	dateRanges: '',
	applyStatusList: [],
	keyword: '',
	keyType: '',
	dataList: []
})
onMounted(() => {
	///	init()

	workRemindApi().then(res => {
		if (res.data) {
			const filteredData = res.data.filter(item => {
				return item.list && Array.isArray(item.list) && item.list.length > 0
			})
			chaoqixintixing.value = filteredData
		} else {
			chaoqixintixing.value = []
		}
	})
	workBenchApi().then(res => {
		daibanlist.value = res.data || []
	})

	govNoticePublishListApi(state.queryForm).then(res => {
		state.dataList = res.data.list

		// console.log(state.dataList)
	})

	workAnalyseApi().then(res => {
		chartData.value = res.data || []
		nextTick(() => renderCharts())
	})
})

const renderCharts = () => {
	// 动态生成 series
	const COLORS = [
		'#5470C6', // 蓝色
		'#91CC75', // 绿色
		'#FAC858', // 黄色
		'#EE6666', // 红色
		'#73C0DE', // 浅蓝色
		'#3BA272' // 深绿色
	]
	const shuffledColors = [...COLORS].sort(() => Math.random() - 0.5)
	chartData.value.forEach((item, index) => {
		const chartDom = document.getElementById(`chart-${index}`)
		const myChart = echarts.init(chartDom)
		const option = {
			grid: {
				left: '10%', // 左侧留白
				right: '10%', // 右侧留白
				width: '80%' // 绘图区域宽度(相对容器百分比或像素值)
			},
			title: { text: item.name, left: 'center' },
			xAxis: { data: ['当月', '当季', '当年'] },
			yAxis: {
				type: 'value',
				axisLabel: {
					formatter: function (value) {
						return Math.floor(value) // 强制取整
					}
				}
			},
			tooltip: {
				// 新增 tooltip 配置
				trigger: 'item', // 触发方式：数据项
				formatter: '{b}<br/>数量: {c}', // 自定义显示格式：{b} 为横轴标签，{c} 为数值
				backgroundColor: 'rgba(50, 50, 50, 0.7)', // 背景色
				borderColor: '#333', // 边框颜色
				textStyle: {
					color: '#fff' // 文字颜色
				}
			},
			series: [
				{
					type: 'bar',
					data: item.count.map(Number),
					itemStyle: {
						color: shuffledColors[index % COLORS.length]
					}
				}
			]
		}
		myChart.setOption(option)
	})
	window.addEventListener('resize', resizeCharts)
}
const resizeCharts = () => {
	chartData.value.forEach((_, index) => {
		const chart = echarts.getInstanceByDom(document.getElementById(`chart-${index}`))
		chart?.resize()
	})
}

const beforeDestroy = () => {
	window.removeEventListener('resize', resizeCharts)
}

const main = ref()

const init = () => {
	let option
	const myChart = echarts.init(main.value)
	const series = [
		{
			data: [120, 200, 150, 80, 70, 110, 130, 150, 80, 70, 110, 130],
			type: 'bar',
			stack: 'a',
			name: 'a'
		},
		{
			data: [10, 46, 64, '-', 0, '-', 0, 150, 80, 70, 110, 130],
			type: 'bar',
			stack: 'a',
			name: 'b'
		},
		{
			data: [30, '-', 0, 20, 10, '-', 0, 150, 80, 70, 110, 130],
			type: 'bar',
			stack: 'a',
			name: 'c'
		},
		{
			data: [30, '-', 0, 20, 10, '-', 0, 150, 80, 70, 110, 130],
			type: 'bar',
			stack: 'b',
			name: 'd'
		},
		{
			data: [10, 20, 150, 0, '-', 50, 10, 150, 80, 70, 110, 130],
			type: 'bar',
			stack: 'b',
			name: 'e'
		}
	]
	const stackInfo = {} as any
	for (let i = 0; i < series[0].data.length; ++i) {
		for (let j = 0; j < series.length; ++j) {
			const stackName = series[j].stack
			if (!stackName) {
				continue
			}
			if (!stackInfo[stackName]) {
				stackInfo[stackName] = {
					stackStart: [],
					stackEnd: []
				}
			}
			const info = stackInfo[stackName]
			const data = series[j].data[i]
			if (data && data !== '-') {
				if (info.stackStart[i] == null) {
					info.stackStart[i] = j
				}
				info.stackEnd[i] = j
			}
		}
	}
	for (let i = 0; i < series.length; ++i) {
		const data = series[i].data as any
		const info = stackInfo[series[i].stack]
		for (let j = 0; j < series[i].data.length; ++j) {
			const isEnd = info.stackEnd[j] === i
			const topBorder = isEnd ? 20 : 0
			const bottomBorder = 0
			data[j] = {
				value: data[j],
				itemStyle: {
					borderRadius: [topBorder, topBorder, bottomBorder, bottomBorder]
				}
			}
		}
	}
	option = {
		xAxis: {
			type: 'category',
			data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
		},
		yAxis: {
			type: 'value'
		},
		series: series
	}

	option && myChart.setOption(option)
	myChart.resize()
}
</script>

<style lang="scss" scoped>
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

// body {
// 	font-family: Arial, sans-serif;
// 	height: 100vh;
// 	display: flex;
// 	flex-direction: column;
// 	background-color: #f5f5f5;
// }

.container {
	display: flex;
	flex-direction: column;
	height: calc(100vh - 120px);
	padding: 10px;
	gap: 10px;
}

.row {
	display: flex;
	flex: 1;
	min-height: 0;
	/* 关键：允许行收缩 */
	gap: 10px;
}

/* 块通用样式 */
.block {
	display: flex;
	flex-direction: column;
	padding: 10px;
	background-color: white;
	border-radius: 4px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	overflow: hidden;

	/* 防止内部元素溢出 */
}

/* 内容包裹层(关键修改) */
.content-wrapper {
	flex: 1;
	min-height: 0;
	/* 允许收缩 */
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* 滚动内容区域 */
.scroll-content {
	flex: 1;
	overflow-y: auto;
	/* 超出滚动 */
}

/* 第一行块大小 */
.first-row .large {
	width: 30%;
}

.first-row .medium {
	width: 40%;
}

.first-row .small {
	width: 30%;
}

/* 第二行块大小 */
.second-row .large {
	width: 70.4%;
}

.second-row .small {
	width: 30%;
}

/* 网格内容区域 */
.grid-content {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 10px;
	padding: 2px;

	/* 为滚动条留空间 */

	&::-webkit-scrollbar {
		display: none;
	}
}

/* 小块样式 */
.item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background-color: #e9f5ff;
	// border: 1px solid #d0e3ff;
	border-radius: 4px;
	padding: 15px;
	cursor: pointer;
}

/* 小块样式 */
.item1 {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background: #fafafc;
	border-radius: 4px;
	padding: 10px;
}

.item11 {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.item-title1 {
	font-size: 14px;
	color: #1491ff;
	margin-top: 5px;
}

/* 第一行第一块 - 一行两个 */
.first-row .large .item {
	width: calc(50% - 5px);
	height: 80px;
}

/* 第一行第一块 - 一行两个 */
.first-row .large .item1 {
	width: calc(50% - 5px);
	height: 80px;
}

/* 第一行第二块 - 一行三个 */
.first-row .medium .item {
	width: calc(33.33% - 7px);
	min-height: 60px;
}

/* 第二行第一块 - 一行两个 */
.second-row .large .item {
	width: calc(50% - 5px);
	// min-height: 60px;
}

/* 第二行第一块 - 一行两个 */
.second-row .large .item11 {
	width: calc(23% - 5px);
	height: 100%;
	// min-height: 60px;
}

/* 通知项样式 */
.notice-item {
	padding: 12px 0;
	border-bottom: 1px solid #eee;
}

/* 标题样式 */
.block-title {
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 10px;
	color: #333;
	padding-bottom: 10px;
	border-bottom: solid 1px #eee;
}

/* 隐藏滚动条(可选) */
.scroll-content::-webkit-scrollbar {
	width: 0px;
}

.scroll-content::-webkit-scrollbar-thumb {
	background: #ccc;
	border-radius: 2px;
}

::v-deep .el-card__header {
	margin: 0px 16px;
	padding: 15px 0px !important;
}

::v-deep .el-card__body {
	padding: 16px !important;
}

.item-title {
	font-size: 14px;
	color: #666;
}

.item-title1 {
	font-size: 14px;
	color: #1491ff;
	margin-top: 5px;
}

.item-content {
	font-size: 18px;
	color: #333;
	font-weight: 600;
	margin-top: 10px;
}

.lookmore {
	font-size: 12px;
	color: #a0a0a0;
}

.ul-item-title {
	font-size: 14px;
	color: #333;
}

.ul-item-go {
	color: #409eff;
	font-size: 13px;
}

.ul {
	width: 100%;
}

.ul li {
	line-height: 35px;
}
</style>
